<template>
  <div class="dashboard-container">
    <div class="header">
      {{ props.title }}
      <span>
        <router-link :to="props.managementLink">{{ props.managementText }}</router-link>
      </span>
    </div>
    <div class="box overview">
      <div class="item">
        <span class="status">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="20px" height="20px">
            <path
              fill="currentColor"
              d="M77.248 415.04a64 64 0 0 1 90.496 0l226.304 226.304L846.528 188.8a64 64 0 1 1 90.56 90.496l-543.04 543.04-316.8-316.8a64 64 0 0 1 0-90.496z"
            ></path>
          </svg>
          已起售
        </span>
        <span class="num">{{ props.sold }}</span>
      </div>
      <div class="item">
        <span class="status">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="20px" height="20px">
            <path
              fill="currentColor"
              d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
            ></path>
          </svg>
          已停售
        </span>
        <span class="num">{{ props.discontinued }}</span>
      </div>
      <el-button class="add" type="primary">
        <router-link :to="props.addLink">
          <el-icon size="20" color="white"><Plus /></el-icon>
          <p style="color: #fff">{{ props.addText }}</p>
        </router-link>
      </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
const props = defineProps({
  sold: {
    type: Number,
    default: 0,
  },
  discontinued: {
    type: Number,
    default: 0,
  },
  setmealsData: {
    type: Object,
    default: {},
  },
  title: {
    type: String,
    default: '',
  },
  managementLink: {
    type: String,
    default: '',
  },
  managementText: {
    type: String,
    default: '',
  },
  addLink: {
    type: String,
    default: '',
  },
  addText: {
    type: String,
    default: '',
  },
})
</script>
<style scoped lang="scss">
.overview {
  .item {
    padding: 20px;
    .num {
      float: right;
    }
  }
  .add {
    height: 100%;
    flex: none;
    color: #000;
    .el-icon {
      margin: 0 auto;
    }
  }
}
</style>
